<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            padding:0rem;
            margin: 0px;
        }
        body{
            background-color: #f5f7fa;
        }
        .tip{
            display: flex;
            white-space: nowrap;
        }
        .top{
            display: flex;
            align-items: center;
            flex-flow: row nowrap;
            justify-content: space-between;
            width: 100%;
            margin-top: 30px;
        }
        #container{
            width: 80%;
            margin:0 auto;
        }
        .icon_box{
            display: flex;
            flex-flow: column;
            color:#1E9FFF
        }
        .icon_box>div:nth-child(1){
            font-family: STXingkai;
            font-size: 30px;
        }
        #main{
            margin: 30px 0px;
            background-color: #ffffff;
            border: .5px solid rgba(0,0,0,.08);
            box-shadow: 0 0 10px 0 rgba(39,106,255,.13);
            padding: 10px;
        }
        .type_box{
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            width: 100%;
            border-bottom: 1px solid #ededed;
            margin-bottom: 10px;
        }
        .type{
            padding: 5px 10px;
            cursor: pointer;
            flex:1;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .type_select{
            padding: 5px 10px;
            background-color: #1E9FFF;
            color: #fff;
            cursor: pointer;
            flex:1;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .type:hover{
            color:#1E9FFF
        }
        #list{
            display: flex;
            flex-flow: row wrap;
            justify-content: normal;
        }
        .course_item{
            width: 160px;
            border: .5px solid rgba(0,0,0,.08);
            box-shadow: 0 0 10px 0 rgba(39,106,255,.13);
            margin:10px;
            margin-left: 25px;
            cursor: pointer;
            transition:all .4s;
        }
        .login_btn{
            cursor: pointer;
        }
        .course_item:hover{
            transform:scale(1.2);
        }
        .img_box{
            width: 100%;
            height: 100px ;
        }
        .course_detail_box{
            padding: 5px;
            height: 80px;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
        }
        .course_detail_bottom{
            display: flex;
            flex-flow: column;
            font-size: 12px;
            color: #999;
        }
        .play_times_box,.create_time_box{
            flex: 1;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        .little_box{
            display: flex;
            align-items: center;
            flex-flow: nowrap;
        }
        .course_title{
            font-size: 13px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;/*重点，不能用block等其他*/
            -webkit-line-clamp: 2;/*重点IE和火狐不支持*/
            -webkit-box-orient: vertical;/*重点*/
        }
        .create_person_box{
            margin-top: 5px;
        }
        .person_box{
            display: flex;
            flex-flow: row nowrap;
            padding: 10px 0;
            cursor: pointer;
        }
        #head-img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            border-radius: 50%;
        }
        .hide{
            display: none;
        }
        #sign_out{
            cursor: pointer;
        }
        #top_personal_signature{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #999;
            line-height: 16px;
            margin-top: 4px
        }
    </style>
</head>
<body>
<div id="container">
    <div class="top">
        <div class="icon_box">
            <div>视频教学网</div>
            <div>www.videostudy.com</div>
        </div>
        <div class="tip">
            <img src="img/账号.svg" width="20px" height="20px" id="default_head"/>
            <span class="login_btn">登录 / 注册</span>
            <div class="person_box hide">
                <img src="img/douyin.png" id="head-img" >
                <div style="width: 289px;">
                    <div id="top_nickname"></div>
                    <div id="top_personal_signature"></div>
                </div>
            </div>
            <div id="sign_out" class="hide">注销</div>
        </div>
    </div>
    <div id="main">
        <div class="type_box">
            <div>请选择类型：</div>
            <div class="type">全部</div>
        </div>
        <div id="list"></div>
    </div>
</div>
<script type="text/javascript" src="layui/layui.js"></script>
<script>
    layui.use(['layer'],function () {
        var $ = layui.jquery,
        layer = layui.layer;
        $(".login_btn").click(function () {
            window.location.href="home/userLogin"
        })
        $("#sign_out").click(function () {
            sessionStorage.clear()
            window.location.reload()
        })


        /*
            获取登录用户信息
         */
        if(typeof (sessionStorage.user) != 'undefined')
        var user =JSON.parse(sessionStorage.user);
        console.log(sessionStorage.user)
        if(user!=null){
            $(".login_btn").addClass("hide")
            $("#default_head").addClass("hide")
            $(".person_box").removeClass("hide")
            $("#sign_out").removeClass("hide")
            $("#top_nickname").html(user.nickname)
            $("#head-img").attr("src",user.faceImage)
            $("#top_personal_signature").html(user.personalSignature)
        }
        /**
         *获取类型数据
         * */
        $.ajax({
            type: "get",
            url: "course/types/",
            dataType: "json",
            success:function (res) {
                console.log(res)
                for (var i=0;i<res.data.length;i++){
                    $(".type_box").append("<div class=\"type\">"+res.data[i]+"</div>")
                }
                $(".type").click(function () {
                    $(".type_select").each(function(){
                        // let this = $(this);
                        $(this).removeClass("type_select").addClass("type")
                    });
                    $(this).removeClass("type").addClass("type_select")
                    $.ajax({
                        type: "get",
                        url: "course/courses/",
                        dataType: "json",
                        data: {
                            "type": $(this).html()
                        },
                        success:function (res) {
                            console.log(res)
                            $("#list").empty()
                            var map = []
                            for (var i=0;i<res.data.length;i++){
                                $("#list").append("<div class=\"course_item\">\n" +
                                    "                    <div class=\"img_box\">\n" +
                                    "                        <img  src=\""+res.data[i].course_image+"\" width=\"100%\" height=\"100%\"/>\n" +
                                    "                    </div>\n" +
                                    "                    <div class=\"course_detail_box\">\n" +
                                    "                        <div class=\"course_title\">"+res.data[i].course_title+"</div>\n" +
                                    "                        <div class=\"course_detail_bottom\">\n" +
                                    "                            <div class=\"little_box\">\n" +
                                    "                                <div class=\"play_times_box\"><img src=\"img/播放.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].course_looks+"</span></div>\n" +
                                    "                                <div class=\"create_time_box\"><img src=\"img/时间.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].create_time+"</span></div>\n" +
                                    "                            </div>\n" +
                                    "                            <div class=\"create_person_box\"><img src=\"img/user.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].nickname+"</span></div>\n" +
                                    "                        </div>\n" +
                                    "                    </div>\n" +
                                    "            </div>")
                                map.push({"index":res.data[i].id})
                            }
                            $(".course_item").click(function () {
                                if(typeof (sessionStorage.user) == 'undefined'){
                                    layer.msg("登录后才可免费观看本网站所有视频哦！");
                                    return;
                                }

                                var index = $(this).index();
                                sessionStorage.setItem("id",  map[index].index);
                                $.ajax({
                                    type: "get",
                                    url: "user/insertRecords",
                                    dataType: "json",
                                    data: {
                                        "userId": user.id,
                                        "courseId": sessionStorage.getItem('id')
                                    },
                                    success:function (res) {
                                        console.log("新增记录成功")
                                    }
                                })


                                window.location.href = "home/courseDesc"
                            })

                        }
                    })
                })

            }
        })
        $(".person_box").click(function () {
            window.location.href = "home/setting"
        })

        /***
         * 获取课程数据
         */
        $.ajax({
            type: "get",
            url: "course/courses/",
            dataType: "json",
            data: {
                "type": "全部"
            },
            success:function (res) {
                console.log(res)
                var map = []
                for (var i=0;i<res.data.length;i++){
                    $("#list").append("<div class=\"course_item\">\n" +
                        "                    <div class=\"img_box\">\n" +
                        "                        <img  src=\""+res.data[i].course_image+"\" width=\"100%\" height=\"100%\"/>\n" +
                        "                    </div>\n" +
                        "                    <div class=\"course_detail_box\">\n" +
                        "                        <div class=\"course_title\">"+res.data[i].course_title+"</div>\n" +
                        "                        <div class=\"course_detail_bottom\">\n" +
                        "                            <div class=\"little_box\">\n" +
                        "                                <div class=\"play_times_box\"><img src=\"img/播放.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].course_looks+"</span></div>\n" +
                        "                                <div class=\"create_time_box\"><img src=\"img/时间.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].create_time+"</span></div>\n" +
                        "                            </div>\n" +
                        "                            <div class=\"create_person_box\"><img src=\"img/user.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].nickname+"</span></div>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "            </div>")
                    map.push({"index":res.data[i].id})
                }
                $(".course_item").click(function () {
                    if(typeof (sessionStorage.user) == 'undefined'){
                        layer.msg("登录后才可免费观看本网站所有视频哦！");
                        return;
                    }

                    var index = $(this).index();
                    sessionStorage.setItem("id",  map[index].index);
                    console.log(map[index].index);
                    $.ajax({
                        type: "get",
                        url: "user/insertRecords",
                        dataType: "json",
                        data: {
                            "userId": user.id,
                            "courseId": sessionStorage.getItem('id')
                        },
                        success:function (res) {
                            console.log("新增记录成功")
                        }
                    })
                    window.location.href = "home/courseDesc"
                })

            }
        })
    })

</script>
</body>
</html>